<template>
  <!-- 我的订单 -->
  <view class="warp">
    <!-- 导航栏 -->
    <d-navBar title="我的订单" isSeat leftFn @leftFn="goBack"></d-navBar>

    <!-- 订单 -->
    <view class="main">
      <u-tabs
        :list="list"
        :scrollable="true"
        lineColor="#2AD03D"
        :current="current"
        @change="change"
      ></u-tabs>

      <c-scroll-list
        :api="apiFn"
        :option="{ auto: false, safeArea: true }"
        ref="list"
        :apiParams="apiParams"
        @load="(res) => (orderList = res)"
      >
	  <template #default>
        <view
          class="order"
          v-for="(v, i) in orderList.list"
          :key="v.id"
          @click.stop="jumpOrderDetails(v)"
        >
          <!-- 正常订单状态 -->
          <view class="or-top">
            <view class="or-time">订单编号：{{ v.number }}</view>
            <!-- 0-待支付 1-待发货 2-待收货 3-已完成 4-售后 -->
            <view v-if="v.status == 0" class="or-status s1">待付款</view>
            <view v-else-if="v.status == 1" class="or-status s4">待发货</view>
            <view v-else-if="v.status == 2" class="or-status s5">待收货</view>
            <view v-else-if="v.status == 3" class="or-status s3">{{
              v.isComment == 0 ? `已完成` : `已评价`
            }}</view>
            <view v-else-if="v.status == 4" class="or-status s2">售后</view>
            <view v-else class="or-status s2">已取消</view>
          </view>

          <!-- 商品信息 -->
          <view
            class="or-shop"
            v-for="(item, index) in v.orderItemList"
            :key="index"
          >
            <view class="or-img">
              <image :src="item.cover" mode=""></image>
              <!-- <view class="or-end">距结束：23:56:39</view> -->
            </view>
            <view class="or-right">
              <view class="or-title otw">{{ item.title }}</view>
              <view class="or-text">已选：{{ item.propertiesName }}</view>
              <view class="df aife jcsb mt10">
                <view class="or-price"
                  ><text>￥</text>{{ item.goodsPrice }}</view
                >
                <!-- <view class="or-price" v-else><text>￥</text>{{item.goodsPrice}}</view> -->
                <view class="or-num">x{{ item.payNum }}</view>
              </view>
            </view>
          </view>
          <!-- 底部按钮 -->
          <!-- v-if="v.status == 3 && v.isComment == 0" -->
          <view class="or-bottom">
            <view
              class="close"
              v-if="v.status === 3 && v.isComment === 0"
              @click.stop="toEvaluate(v)"
              >去评价</view
            >
            <view
              class="confirm mr20"
              v-if="v.status == 2"
              @click.stop="receiptGoods(v)"
              >确认收货</view
            >
            <view
              class="close"
              v-if="v.status == 2"
              @click.stop="viewLogistics(v)"
              >查看物流</view
            >
          </view>
          <!-- <view class="or-bottom" v-if="v.status == 1">
            <view class="confirm" @click.stop="receiptGoods(v)">确认收货</view>
          </view>

          <view v-if="v.status == 2" class="or-bottom">
            <view class="close" @click.stop="viewLogistics(v)">查看物流</view>
            <view class="confirm" @click.stop="receiptGoods(v)">确认收货</view>
          </view> -->
          <view v-if="v.status == 0 && current != 5" class="or-bottom two-box">
            <view v-if="v.status == 0 && current != 5" class="tw-time"
              ><text style="padding-right: 8rpx; box-sizing: border-box"
                >剩余支付时间</text
              ><u-count-down
                color="#FF3B20"
                separator-color="#FF3B20"
                :time="$fn.addMinutesTime(v.createTime, 15) * 1000"
                format="HH:mm:ss"
              ></u-count-down
            ></view>
            <view v-if="v.status == 0 && current != 5" class="df aic">
              <!-- <view class="close" @click.stop="cancelOrderFn(v)">查看物流</view> -->
              <view class="confirm" @click.stop="redeemPay(v)">立即支付</view>
            </view>
          </view>
        </view>
		</template>
      </c-scroll-list>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "全部",
        },
        {
          name: "待付款",
        },
        {
          name: "待发货",
        },
        {
          name: "待收货",
        },
        {
          name: "已完成",
        },
        {
          name: "售后",
        },
      ],
      current: 0,
      apiFn: this.$api.frontendOrderListY,
      apiParams: {},
      orderList: {},
      resfh: true,
    };
  },
  onLoad(option) {
    this.change({
      index: Number(option.type) + 1,
    });
    this.resfh = false;
  },
  onShow() {
    if (this.resfh) {
      setTimeout(() => {
        this.$refs.list.initList(true);
      });
    } else {
      this.resfh = true;
    }
  },
  methods: {
    // 回到个人中心
    goBack() {
      uni.reLaunch({
        url: "/pages/tabbar/mine",
      });
    },
    // 切换tab菜单
    change(v) {
      let e = v.index;
      // console.log(e, "订单状态");
      this.current = e;
      // this.apiParams.isComment = e == 4 ? 0 : null;
	  this.apiParams.isComment = null;
      if (e <= 4) {
        this.apiParams.status = e ? e - 1 : null;
        // console.log(this.apiParams.status,"this.apiParams.status");
        this.$refs.list.nowApi = this.$api.frontendOrderListY;
      } else {
        this.apiParams.status = 4;
        this.$refs.list.nowApi = this.$api.frontendOrderListY;
      }
      this.$forceUpdate();
      this.$refs.list.refresh();
    },
    // 跳转到订单详情
    jumpOrderDetails(val) {
      uni.navigateTo({
        url: "/pages/order/pages/orderDetails?id=" + val.id,
      });
    },
    toEvaluate(val) {
      uni.navigateTo({
        url: "/pages/order/pages/evaluate?id=" + val?.id,
      });
    },
    // 确认收货
    receiptGoods(val) {
      // console.log(val,"val");
      uni.showModal({
        title: "温馨提示",
        content: "是否确定收货",
        confirmColor: "#2AD03D", // 删除字体的颜色
        cancelColor: "#606166", // 取消字体的颜色
        success: (res) => {
          if (res.confirm) {
            this.$api
              .confirmTakeOver({
                id: val.id,
              })
              .then((res) => {
				  debugger
                console.log(res, "成功收货");
                if (res.code == 200) {
                  uni.showToast({
                    title: "确认收货",
                  });
                  this.$refs.list.initList();
                }
              });
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      });
    },
    // 查看物流
    viewLogistics(val) {
      console.log("val", val);
      uni.navigateTo({
        url: "/pages/order/pages/logisticsInformation?id=" + val.id,
      });
    },
    // 取消订单
    cancelOrderFn() {},
    // 立即支付
    async redeemPay(val) {
      const { data, code } = await this.$api.continuePaymentY({
        id: val.id,
      });
      console.log(code, data, "立即支付");
      if (code == 200 && data.paySignVO) {
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: data.paySignVO.timeStamp,
          nonceStr: data.paySignVO.nonceStr,
          package: data.paySignVO.package,
          signType: data.paySignVO.signType,
          paySign: data.paySignVO.paySign,
          success: (res) => {
            console.log("res", res);
            uni.showToast({
              title: "支付成功",
              duration: 1000,
              icon: "success",
            });
            uni.reLaunch({
              url: "/pages/order/pages/paySuccess",
            });
          },
          fail: (err) => {
            console.log("err", err);
            uni.showToast({
              icon: "error",
              title: "取消支付",
              duration: 1000,
            });
          },
        });
      } else {
        uni.showToast({
          icon: "error",
          title: "支付失败",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  width: 100vw;
  height: 100vh;
  padding-top: 200rpx;
  box-sizing: border-box;
  overflow: scroll;
}

::v-deep .u-tabs {
  background: transparent !important;
}

.main {
  // padding-top: 24rpx;
  width: 750rpx;
  height: calc(100vh - 200rpx);

  .order {
    padding: 0 20rpx 20rpx;
    // border: 1rpx solid #e6e6e6;
    border-radius: 16rpx;
    // background-color: #fff;
    padding-top: 24rpx;
    box-sizing: border-box;

    .or-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 16rpx 16rpx 0rpx 0rpx;
      box-sizing: border-box;

      .or-time {
        font-size: 28rpx;
        color: #666666;
        line-height: 33rpx;
      }

      .or-status {
        font-size: 28rpx;
        line-height: 33rpx;

        &.s1 {
          color: #fd8417;
        }

        &.s2 {
          color: #999999;
        }

        &.s3 {
          color: #1a1a1a;
        }

        &.s4 {
          color: #fc3e3e;
        }

        &.s5 {
          color: #4eb212;
        }
      }
    }

    .or-shop {
      position: relative;
      background: #fff;
      display: flex;
      padding: 18rpx 32rpx;
      border-top: 1rpx solid #e6e6e6;
      box-sizing: border-box;

      .or-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        overflow: hidden;
        position: relative;
        flex: none;

        .or-end {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40rpx;
          background: linear-gradient(90deg, #ff4b57 44%, #ff8326 100%);
          border-radius: 16rpx;
          font-size: 20rpx;
          color: #ffffff;
          text-align: center;
          line-height: 38rpx;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }

      .or-right {
        padding: 0rpx 0rpx 0rpx 28rpx;
        width: 470rpx;
        box-sizing: border-box;

        .or-title {
          font-size: 32rpx;
          color: #343840;
        }

        .or-num {
          font-size: 28rpx;
          font-weight: bold;
          color: #1a1a1a;
        }

        .or-price {
          font-size: 48rpx;
          font-weight: 800;
          color: #ee3b31;

          text {
            font-size: 24rpx;
          }
        }

        .or-text {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          margin: 14rpx 0;
        }
      }
    }

    .or-bottom {
      display: flex;
      justify-content: flex-end;
      padding: 16rpx 20rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 0rpx 0rpx 16rpx 16rpx;
      border-top: 1rpx solid #e6e6e6;

      &.two-box {
        justify-content: space-between;
      }

      .confirm {
        width: 144rpx;
        height: 48rpx;
        background: linear-gradient(135deg, #2ad03d 0%, #00b815 100%);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
      }

      .close {
        width: 144rpx;
        height: 44rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 1rpx solid #999999;
        font-size: 24rpx;
        color: #666666;
        line-height: 44rpx;
        text-align: center;
        margin-right: 20rpx;
      }

      .tw-time {
        padding-left: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #fc5d5d;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        ::v-deep .u-count-down__text.data-v-463368ae {
          color: #fc5d5d;
        }
      }
    }
  }

  .order-more-icon {
    color: #666666;
  }

  .order-more-txt {
    margin-left: 4rpx;
  }

  .order-sum {
    font-size: 32rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 36rpx;
    margin: 0 20rpx 20rpx 20rpx;

    .order-sum-unit,
    .order-sum-unit-right {
      font-size: 24rpx;
    }

    .order-sum-unit {
      margin-right: 4rpx;
    }

    .order-sum-unit-right {
      margin-left: 4rpx;
    }
  }
}
</style>
